<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#dinglan {
				width: 1440px;
				height: 56px;
				border-bottom: 2px solid #E7E7EC;
			}

			#left {
				position: relative;
				left: 24px;
				top: 8px;
				width: 302px;
				height: 40px;
			}

			#flag {
				width: 84px;
				height: 32px;
			}

			#lujing {
				position: relative;
				top: -32px;
				width: 48px;
				height: 40px;
				opacity: 1;
			}

			#log {
				position: relative;
				left: 48px;
				top: 4.13px;
				width: 84px;
				height: 32px;
				opacity: 1;
			}

			#right {
				width: 342px;
				height: 32px;
				position: relative;
				top: -28px;
				left: 1048px;
			}

			#xingming {
				width: 32px;
				height: 32px;
				line-height: 32px;
				font-size: 10.67px;
				float: right;
				position: relative;
				right: -32px;
				text-align: center;
				color: #FFFFFF;
				border-radius: 100px;
				background-color: #A1C1FF;
			}

			#tian {
				width: 234px;
				height: 30px;
				position: relative;
				left: 90px;
			}

			#choice {
				position: relative;
				left: 382px;
				top: -80px;
				width: 430px;
				height: 56px;
			}

			#hangtou {
				width: 560px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				font-size: 16px;
				font-weight: bold;
				position: relative;
				left: -52px;
			}

			#xxmb {
				width: 340px;
				height: 734px;
			}

			#top {
				width: 340px;
				height: 160px;
				border-bottom: 2px solid #E7E7EC;

			}

			#top1 {
				width: 340px;
				height: 40px;
				position: absolute;
				top: 80px;
			}

			#select {
				width: 24px;
				height: 24px;
				float: left;
				position: relative;
				top: 8px;
				left: 24px;
			}

			#name {
				width: 232px;
				height: 26px;
				float: left;
				position: relative;
				top: 7px;
				left: 32px;
				font-family: PingFang SC;
				font-size: 18px;
				font-weight: bold;
				line-height: 26px;
				color: #1464FF;
			}

			#top2 {
				width: 340px;
				height: 84px;
			}

			#aa {
				float: left;
				font-size: 14px;
				position: absolute;
				left: 48px;
				top: 120px;
			}

			.bo {
				width: 56px;
				height: 20px;
				margin: 8px;
				text-align: right;
				position: relative;
				right: 24px;
			}

			#bb {
				float: right;
				font-size: 14px;
				position: absolute;
				left: 134px;
				top: 120px;
			}

			.ri {
				width: 183px;
				height: 20px;
				margin: 8px;
				text-align: right;
			}

			#mid {
				width: 340px;
				height: 302px;
			}

			#mid1 {
				width: 340px;
				height: 40px;
			}

			#tree {
				font-size: 16px;
				position: relative;
				top: 8px;
				left: 24px;
				font-weight: bold;
			}

			#mid2 {
				width: 316px;
				height: 64px;
				padding-left: 24px;
				border-top: 2px dashed #e7e7e7;
				border-bottom: 2px dashed #e7e7e7;
			}

			.xmxx {
				width: 292px;
				height: 32px;
				line-height: 32px;
			}

			#dw1 {
				width: 20px;
				height: 20px;
				float: right;
				background-image: url(img/定位.png);
				background-size: 20px 20px;
			}

			#dw2 {
				width: 20px;
				height: 20px;
				float: right;
				position: absolute;
				left: 198px;
				top: 2px;
				background-image: url(img/定位.png);
				background-size: 20px 20px;
			}

			#xial {
				width: 8px;
				height: 8px;
				position: relative;
				left: 6px;
				display: inline-block;
			}

			#xm1 {
				width: 218px;
				height: 20px;
				line-height: 20px;
				position: relative;
				left: 24px;
				top: -26px;
				font-size: 16px;
			}

			.xmxx:hover {
				width: 278px;
				height: 32px;
				border-radius: 4px;
				background-color: #A1C1FF;
			}

			#xm2 {
				width: 218px;
				height: 20px;
				line-height: 20px;
				position: relative;
				left: 24px;
				font-size: 16px;
			}

			#bottom {
				width: 340px;
			}

			#bottomtop {
				width: 340px;
				height: 40px;
				border-bottom: 2px solid #e7e7e7;
				border-top: 2px solid #e7e7e7;
			}

			#bottomleft {
				float: left;
				font-size: 14px;
				width: 64px;
				height: 24px;
				position: relative;
				top: 8px;
				left: 24px;
				font-weight: bold;
			}

			#photo01 {
				width: 284px;
				height: 164px;
				background-image: url(img/病害01.png);
				background-size: 284px 164px;
				position: relative;
				top: 40px;
				left: 28px;
			}

			#bingcong {
				width: 284px;
				height: 36px;
				font-size: 12px;
				position: relative;
				left: 28px;
				top: 54px;
				color: #A6A6A6;
			}

			#photo02 {
				width: 1100px;
				height: 733px;
				background-image: url(img/大桥.png);
				background-size: 1700px 1000px;
				background-repeat: no-repeat;
				background-position: -550px -10px;
				position: absolute;
				left: 348px;
				top: 64px;
			}

			#tc {
				width: 36px;
				height: 72px;
				position: relative;
				background-color: white;
				top: -710px;
				left: 1390px;
				border-radius: 5px;
				background-color: rgba(255, 255, 255, 0.6);
			}

			.ma {
				width: 30px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				position: relative;
				top: 6px;
				left: 3px;
			}

			.tcgl {
				width: 30px;
				height: 30px;
				border-radius: 3px;
			}

			#tu {
				position: relative;
				top: 3px;
				width: 22px;
				height: 22px;
			}

			#ji {
				width: 20px;
				height: 20px;
			}

			#tuli {
				width: 248px;
				height: 258px;
				background-color: black;
				border-radius: 8px;
				position: relative;
				right: 604px;
				top: 115px;
			}

			#top01 {
				width: 232px;
				height: 28px;
				position: relative;
				left: 8px;
				top: 4px;
				border-bottom: 2px solid #595959;
			}

			#le {
				float: left;
				width: 56px;
				height: 20px;
				color: #ffffff;
				font-size: 14px;
				text-align: center;
				line-height: 20px;
				margin-top: 4px;
			}

			#rig {
				float: right;
				width: 56px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				color: #ffffff;
				font-size: 14px;
				margin-top: 4px;
				position: relative;
				left: 4px;
			}

			#mid3 {
				width: 248px;
				height: 48px;
				font-size: 14px;
				color: #A6A6A6;
				text-align: left;
				line-height: 16px;
				margin-top: 8px;
				margin-left: 2px;
			}

			#bottom2 {
				width: 232px;
				height: 55px;
				position: relative;
				top: 30px;
				left: 8px;
			}

			#bottom3 {
				width: 232px;
				height: 18px;
				position: relative;
				top: 92px;
				right: 8px;
				font-size: 14px;
				line-height: 18px;
				float: left;
				color: white;
			}

			#time {
				position: relative;
				left: 16px;
			}

			#zhuanhuan {
				float: right;
				margin-top: -18px;
				color: #4383FF;
				position: relative;
				left: 16px;
			}
#zhuanhuan:hover {
	color: #72A2FF;
}
#zhuanhuan:active{
	color: #1050CC;
}
#tubiao{
	position: absolute;
	right: 522px;
	top: 445px;
	width: 20px;
	height: 20px;
	background-image: url(img/裂缝小图标.png);
	background-repeat: no-repeat;
	background-size: 18px 18px;
	background-position: 1px 1px;
}
#tubiao:hover{
	background-color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 100px;
}
			#daohang {
				width: 560px;
				height: 56px;
			}

			li {
				width: 80px;
				height: 56px;
				text-align: center;
				line-height: 56px;
				font-size: 18px;
				font-weight: bold;
				float: left;
				list-style: none;
				margin-right: 24px;
				position: relative;
				top: -10px;
			}
li:hover{
	color: #1464FF;
}
			li:active {
				color: #1464FF;
				border-bottom: 2px solid #1464FF;
			}
		</style>
	</head>
	<body>
		<div id="dinglan">
			<div id="left">
				<div id="log"><img src="./img/flight.png" alt="" id="flag" /></div>
				<img src="./img/log.png" alt="" id="lujing" />
			</div>
			<div id="right">
				<div id="xingming">姓名</div>
				<div><img src="./img/天气.png" alt="" id="tian" /></div>
			</div>
			<div id="choice">
				<div id="daohang">
					<ul>
						<li style="color:#1464FF ;border-bottom: 2px solid #1464FF;">首页</li>
						<a href="./manage-a.html" style="color: black;">
							<li>项目管理</li>
						</a>
						<li>巡检航线</li>
						<li>数据统计</li>
						<li>人员管理</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="xxmb">
			<div id="top">
				<div id="top1"><img src="./img/列表.png" alt="" id="select" />
					<div id="name">铜陵大桥</div>
				</div>
				<div id="top2">
					<div id="aa">
						<div class="bo">路线编号</div>
						<div class="bo">项目数量</div>
						<div class="bo">管养单位</div>
					</div>
					<div id="bb">
						<div class="ri">G330 K816+060-K820+276</div>
						<div class="ri">1个</div>
						<div class="ri">铜陵长江公路大桥管理处</div>
					</div>
				</div>
			</div>
			<div id="mid">
				<div id="mid1">
					<div id="tree">项目树</div>
				</div>
				<div id="mid2">
					<div class="xmxx"><img src="img/下拉箭头.png" alt="" id="xial" />
						<div id="xm1">铜陵大桥<div id="dw1"></div>
						</div>

					</div>
					<div class="xmxx">
						<div id="xm2">铜陵大桥<div id="dw2"></div>
						</div>

					</div>
				</div>
			</div>
			<div id="bottom">
				<div id="bottomtop">
					<div id="bottomleft">病害统计</div>
					<div id="photo01"></div>
					<div id="bingcong">*本数据均来自无人机拍摄图片分析得出，数据详情请咨询养护单位。</div>
				</div>
			</div>
		</div>
		<div id="photo02"></div>
		<div id="tc">
			<div class="ma"><a href="design_manage.html"><img src="img/叠层1.png" alt="" class="tuchengguangli"
						id="tu" /></a></div>
			<div class="ma"><a href="realtime_transmission.html"><img src="img/无人机01.png" alt="" class="tcgl" id="ji"
						style="margin-top: 3px;" /></a></div>
			<div id="tuli">
				<div id="top01">
					<div id="le">裂隙病害</div>
					<div id="rig">轻微</div>
				</div>
				<div id="mid3">病害描述：描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</div>
				<div id="bottom2"><a href="check_photo.html"><img src="./img/裂隙图片.png" alt=""
							style="width: 232px;height: 100px;" /></a></div>
				<div id="bottom3">
					<div id="time">2023/12/29</div>
					<div id="zhuanhuan">查看详情 >></div>
					<div style="position: relative;left:110px;"><img src="img/下拉箭头.png" alt=""
							style="margin-top: 6px;" /></div>
				</div>
			</div>
			<div id="tubiao"></div>
	</body>
</html>